<template>
  <div class="menu-box">
    <div class="fixed-menu">
      <img src="../../static/img/menu.png" alt="" @click="showMenu">
      <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
        <div v-show="menuShow">
          <div class="triangle" id="triangle"></div>
          <div class="menu-content" id="menu" v-clickoutside="outsideMenu">&nbsp;
            <!-- 返回首页 -->
            <div class="back-to-homepage">
              <img src="../../static/img/backToHomepage.png" alt="" style="vertical-align:middle;">
              <span class="back-to-homepage-title">首页</span>
            </div>
            <!-- 综合监控 -->
            <div class="menu-content-item">
              <div class="menu-content-item-left">
                <img src="../../static/img/iscs.png" alt="">&nbsp;
                <span class="menu-content-item-title">综合监控</span>
              </div>
              <div class="menu-content-item-right">
                <a href="http://42.159.90.235:5889/" target="blank">一次接线图</a>
                <a>风力监控</a>
                <a>光伏监控</a>
                <a>储能监控</a>
                <a>负荷监控</a>
                <a>箱变监控</a>
                <a>实时监控</a>
                <a>告警分析</a>
              </div>
            </div>
            <div class="menu-content-item">
              <div class="menu-content-item-left">
                <img src="../../static/img/working-management.png" alt="">&nbsp;
                <span class="menu-content-item-title">运行管理</span>
              </div>
              <div class="menu-content-item-right">
                <a>电源管理</a>
                <a>负荷管理</a>
                <a>能效分析</a>
                <a>运维管理</a>
              </div>
            </div>
            <div class="menu-content-item">
              <div class="menu-content-item-left">
                <img src="../../static/img/working-optimization.png" alt="">&nbsp;
                <span class="menu-content-item-title">运行优化</span>
              </div>
              <div class="menu-content-item-right">
                <a>光伏与发电预测</a>
                <a>风力发电预测</a>
                <a>负荷预测</a>
                <a>计划编制</a>
                <a>充电调度</a>
                <a>运维评价</a>
              </div>
            </div>
            <div class="menu-content-item">
              <div class="menu-content-item-left">
                <img src="../../static/img/analysis-resolution.png" alt="">&nbsp;
                <span class="menu-content-item-title">分析决策</span>
              </div>
              <div class="menu-content-item-right">
                <a>全息反演</a>
                <a>运维仿真</a>
                <a>需求侧响应</a>
                <a>辅助服务</a>
              </div>
            </div>
            <div class="menu-content-item">
              <div class="menu-content-item-left">
                <img src="../../static/img/system-management.png" alt="">&nbsp;
                <span class="menu-content-item-title">系统管理</span>
              </div>
              <div class="menu-content-item-right">
                <a>图模管理</a>
                <a>参数管理</a>
                <a>服务监视</a>
                <a>采集监视</a>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div class="shadow" v-if="shadowShow"></div>
  </div>
</template>
<script>
const clickoutsideContext = '@@clickoutsideContext';
const clickoutside = {
  bind(el, binding, vnode) {
    const documentHandler = function(e) {
      if (!vnode.context || el.contains(e.target) || e.target.tagName === 'IMG') {
        return false;
      }
      if (binding.expression) {
        vnode.context[el[clickoutsideContext].methodName](e);
      } else {
        el[clickoutsideContext].bindingFn(e);
      }
    };
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      bindingFn: binding.value
    };
    setTimeout(() => {
      document.addEventListener('click', documentHandler);
    }, 0);
  },
  update(el, binding) {
    el[clickoutsideContext].methodName = binding.expression;
    el[clickoutsideContext].bindingFn = binding.value;
  },
  unbind(el) {
    document.removeEventListener(
      'click',
      el[clickoutsideContext].documentHandler
    );
  }
};
export default {
  name: 'Menu',
  directives: {
    clickoutside
  },
  data () {
    return {
      menuShow: false,
      shadowShow: false
    };
  },
  methods: {
    showMenu () {
      if (!this.menuShow) {
        this.menuShow = true;
        this.shadowShow = true;
      } else {
        this.menuShow = false;
        this.shadowShow = false;
      }
    },
    outsideMenu () {
      if (this.menuShow) {
        this.menuShow = false;
        this.shadowShow = false;
      }
    }
  }
};
</script>
<style scoped>
@media screen and (min-width:878px) and (max-width:1920px) {
  @keyframes flyin {
    0% {
      width: 0px;
      height: 0px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(0);
    }
    100% {
      width: 500px;
      height: 700px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(1);
    }
  }
  @keyframes rotateTriangle {
    0% {
      transform: rotate(0);
      /* transform: scale(0); */
    }
    100% {
      transform: rotate(360deg);
      /* transform: scale(1); */
    }
  }
  .fixed-menu {
    position: fixed;
    top: 70px;
    right: 1.6%;
    z-index: 1004;
  }
  .fixed-menu>img:hover {
    cursor: pointer;
  }
  .fixed-menu>img {
    margin-left: 800px;
  }
  .triangle {
    width:0;
    height:0;
    border-left:13px solid transparent;
    border-right:13px solid transparent;
    border-bottom:13px solid #FFFFFF;
    margin-top: 2px;
    margin-left: 805px;
    animation: rotateTriangle 0.3s;
  }
  .shadow {
    position: fixed;
    background: rgba(1, 1, 1, 0.3);
    z-index: 1002;
    overflow: auto;
    top: 50px;
    left: 0;
    right: 15px;
    bottom: 0;
  }
  .menu-content {
    width: 500px;
    height: 700px;
    background-color: #FFFFFF;
    margin-top: -1px;
    float: right;
    border-radius: 6px;
    animation: flyin 0.3s;
  }
  .back-to-homepage {
    margin-left: 3.6%;
  }
  .back-to-homepage-title {
    color: #52AFEE;
    line-height: 25px;
    margin-left: 0.9%;
    margin-top: 2px;
    cursor: pointer;
  }
  .menu-content-item {
    display: flex;
    margin-top: 20px;
  }
  .menu-content-item-title {
    font-size: 18px;
    line-height: 25px;
  }
  .menu-content-item-left {
    width: 25%;
    margin-left: 3.5%;
  }
  .menu-content-item-left>img {
    width: 25px;
  }
  .menu-content-item-right {
    width: 75%;
  }
  .menu-content-item-right>a {
    text-decoration: none;
    margin-left: 10%;
    width: 40%;
    float: left;
    color: #666666;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .menu-content-item-right>a:hover {
    color: #4A90E2;
  }
}
@media screen and (min-width:633px) and (max-width:877px) {
  @keyframes flyin {
    0% {
      width: 0px;
      height: 0px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(0);
    }
    100% {
      width: 450px;
      height: 400px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(1);
    }
  }
  @keyframes rotateTriangle {
    0% {
      transform: rotate(0);
      /* transform: scale(0); */
    }
    100% {
      transform: rotate(360deg);
      /* transform: scale(1); */
    }
  }
  .fixed-menu {
    position: fixed;
    top: 70px;
    right: 3%;
    z-index: 1003;
  }
  .fixed-menu>img:hover {
    cursor: pointer;
  }
  .fixed-menu>img {
    margin-left: 880px;
  }
  .triangle {
    width:0;
    height:0;
    border-left:13px solid transparent;
    border-right:13px solid transparent;
    border-bottom:13px solid #FFFFFF;
    margin-top: 2px;
    margin-left: 885px;
    animation: rotateTriangle 0.3s;
  }
  .shadow {
    position: fixed;
    background: rgba(1, 1, 1, 0.3);
    z-index: 1002;
    overflow: auto;
    top: 50px;
    left: 0;
    right: 15px;
    bottom: 0;
  }
  .menu-content {
    width: 450px;
    height: 400px;
    overflow: scroll;
    background-color: #FFFFFF;
    margin-top: -1px;
    margin-left: 465px;
    border-radius: 6px;
    animation: flyin 0.3s;
  }
  .back-to-homepage {
    margin-left: 3.6%;
  }
  .back-to-homepage-title {
    color: #52AFEE;
    line-height: 25px;
    margin-left: 0.9%;
    margin-top: 2px;
    cursor: pointer;
  }
  .menu-content-item {
    display: flex;
    margin-top: 20px;
  }
  .menu-content-item-title {
    font-size: 16px;
    line-height: 25px;
  }
  .menu-content-item-left {
    width: 30%;
    margin-left: 3.5%;
  }
  .menu-content-item-left>img {
    width: 25px;
  }
  .menu-content-item-right {
    width: 70%;
  }
  .menu-content-item-right>a {
    text-decoration: none;
    margin-left: 10%;
    width: 40%;
    float: left;
    color: #666666;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .menu-content-item-right>a:hover {
    color: #4A90E2;
  }
}
@media screen and (max-width:622px) {
  @keyframes flyin {
    0% {
      width: 0px;
      height: 0px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(0);
    }
    100% {
      width: 330px;
      height: 400px;
      background-color: #FFFFFF;
      margin-top: -1px;
      float: right;
      border-radius: 6px;
      transform: scale(1);
    }
  }
  @keyframes rotateTriangle {
    0% {
      transform: rotate(0);
      /* transform: scale(0); */
    }
    100% {
      transform: rotate(360deg);
      /* transform: scale(1); */
    }
  }
  .fixed-menu {
    position: fixed;
    top: 70px;
    right: 3%;
    z-index: 1003;
  }
  .fixed-menu>img:hover {
    cursor: pointer;
  }
  .fixed-menu>img {
    margin-left: 880px;
  }
  .triangle {
    width:0;
    height:0;
    border-left:13px solid transparent;
    border-right:13px solid transparent;
    border-bottom:13px solid #FFFFFF;
    margin-top: 2px;
    margin-left: 885px;
    animation: rotateTriangle 0.3s;
  }
  .shadow {
    position: fixed;
    background: rgba(1, 1, 1, 0.3);
    z-index: 1002;
    overflow: auto;
    top: 50px;
    left: 0;
    right: 15px;
    bottom: 0;
  }
  .menu-content {
    width: 330px;
    height: 400px;
    overflow: auto;
    background-color: #FFFFFF;
    margin-top: -1px;
    margin-left: 582px;
    border-radius: 6px;
    animation: flyin 0.3s;
  }
  .back-to-homepage {
    margin-left: 3.6%;
  }
  .back-to-homepage-title {
    color: #52AFEE;
    line-height: 25px;
    margin-left: 0.9%;
    margin-top: 2px;
    cursor: pointer;
  }
  .menu-content-item {
    display: flex;
    margin-top: 20px;
  }
  .menu-content-item-title {
    font-size: 14px;
    line-height: 25px;
  }
  .menu-content-item-left {
    width: 30%;
    margin-left: 2%;
  }
  .menu-content-item-left>img {
    width: 20px;
  }
  .menu-content-item-right {
    width: 70%;
  }
  .menu-content-item-right>a {
    text-decoration: none;
    width: 50%;
    float: left;
    color: #666666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .menu-content-item-right>a:hover {
    color: #4A90E2;
  }
}
/* @keyframes flyin {
  0% {
    width: 0px;
    height: 0px;
    background-color: #FFFFFF;
    margin-top: -1px;
    float: right;
    border-radius: 6px;
    transform: scale(0);
  }
  100% {
    width: 500px;
    height: 700px;
    background-color: #FFFFFF;
    margin-top: -1px;
    float: right;
    border-radius: 6px;
    transform: scale(1);
  }
} */
/* @keyframes flyout {
  0% {
    width: 500px;
    height: 700px;
    background-color: #FFFFFF;
    margin-top: -1px;
    float: right;
    border-radius: 6px;
    transform: scale(1);
  }
  100% {
    width: 0px;
    height: 0px;
    background-color: #FFFFFF;
    margin-top: -1px;
    float: right;
    border-radius: 6px;
    transform: scale(0);
    display: none;
  }
} */
/* @keyframes rotateTriangle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateTriangleFlyOut {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
    display: none;
  }
} */
/* .menu-content {
  animation: flyin 0.3s;
}
.triangle {
  animation: rotateTriangle 0.3s;
}
.menu-content-fly-out {
  animation: flyout 0.3s;
}
.triangle-fly-out {
  animation: rotateTriangleFlyOut 0.3s;
} */
</style>
